<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <!-- <style>
    #uu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      border: 2px solid;
    }

    li {
      border-bottom: 2px solid;
      /* height: 50px; */
      line-height: 100px;
      min-height: 100px;
    }

    #uu li img {
      height: 60px;
      vertical-align: middle;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .loading {
      width: 20px;
      height: 20px;
      background: red;
      animation: rotate 2s linear infinite;
    }
  </style> -->
  <style>
    #uu {
      width: 60%;
      list-style-type: none;
      margin: 0;
      padding: 0;
      border: 2px solid orange;
    }

    li {
      /* width: 50%; */
      border-bottom: 2px solid orange;
      /* border-right: 2px solid; */
      /* border: 2px pink; */
      /* height: 50px; */
      line-height: 100px;
      min-height: 100px;
    }

    #uu li img {
      height: 60px;
      vertical-align: middle;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .loading {
      width: 20px;
      height: 20px;
      background: red;
      animation: rotate 2s linear infinite;
    }
  </style>

  <body>
    <!-- <div class="loading"></div> -->
    <div class="container">
      <ul id="uu"></ul>
    </div>
    <!-- <button id="btn">点击</button> -->
  </body>
</html>
<!-- <script>
  (function () {
    //封装一个方法,叫做render,复用这个函数可以将数据 转变成结构 并且添加到页面上
    let newData = []; //这个数组是用来和原来的数据进行合并,实现追加的效果
    let pageid = 1; //产品的id
    function render(data = []) {
      newData = [...newData, ...data];
      console.log(newData);
      let html = ""; //这个变量用于保存循环创建出来的结构字符串

      newData.forEach((item) => {
        let regExp = /(?<=imgurl=)[^'"]*/;
        let r = item.productImg2.match(regExp);
        console.log(r);
        html += `
            <li>
                <img width="100" src=${r[0]} />
                <b>${item.productName}</b>
            </li>
            `;
      });

      $("#uu").html(html);
    }

    //封装一个叫做lazyLoad的方法,这个方法需要接受2个桉树
    //1.一个函数,当懒加载达到阈值之后,就会回调传入的函数
    //2.阈值 达到传入的阈值的时候 对函数进行回调

    function lazyLoad(fn, threshold = 5) {
      //默认的阈值是50
      //监听浏览器滚动条滚动事件
      let flag = true; //默认开关是打开的
      window.onscroll = function () {
        let clientHeight = document.documentElement.clientHeight; //获取可视区高度
        let scrollTop = document.documentElement.scrollTop;
        let scrollHeight = document.documentElement.scrollHeight;
        //内容距离可视区底部的距离
        let distance = scrollHeight - (clientHeight + scrollTop);

        if (distance < threshold) {
          if (flag) {
            //一旦进入 将开关关闭 防止多次触发
            flag = false;
            // console.log('快要到底部了');
            fn(); //回调传入的函数
          }
        } else {
          //滚动的距离已经大于了阈值 将开关打开 用户可能滚动条往上滚了
          flag = true;
        }
      };
    }

    lazyLoad(function () {
      pageid++; //每次被懒加载回调的时候 让id自加 请求不同的数据
      if (pageid > 14) {
        //当id大于14的时候 停止发送请求
        return;
      }
      $.ajax({
        url: "http://chst.vip:1234/api/getmoneyctrl",
        data: {
          pageid,
        },
      }).then((res) => {
        console.log(res);
        render(res.result);
        //循环数据 创建结构
      });
    }, 50);

    $.ajax({
      url: "http://chst.vip:1234/api/getmoneyctrl",
      data: {
        pageid: 1,
      },
    }).then((res) => {
      console.log(res);
      render(res.result);
      //循环数据 创建结构
    });
  })();
</script> -->
<script>
  (function () {
    //封装一个方法,叫做render,复用这个函数可以将数据 转变成结构 并且添加到页面上
    let newData = []; //这个数组是用来和原来的数据进行合并,实现追加的效果
    let pageid = 1; //产品的id
    function render(data = []) {
      newData = [...newData, ...data];
      console.log(newData);
      let html = ""; //这个变量用于保存循环创建出来的结构字符串

      newData.forEach((item) => {
        let regExp = /(?<=imgurl=)[^'"]*/;
        let r = item.productImg2.match(regExp);
        console.log(r);
        html += `
            <li>
                <img width="100" src=${r[0]}   />
                <b>${item.productName}</b>
            </li>
            `;
      });

      $("#uu").html(html);
    }

    //封装一个叫做lazyLoad的方法,这个方法需要接受2个桉树
    //1.一个函数,当懒加载达到阈值之后,就会回调传入的函数
    //2.阈值 达到传入的阈值的时候 对函数进行回调

    function lazyLoad(fn, threshold = 5) {
      //默认的阈值是50
      //监听浏览器滚动条滚动事件
      let flag = true; //默认开关是打开的
      window.onscroll = function () {
        let clientHeight = document.documentElement.clientHeight; //获取可视区高度
        let scrollTop = document.documentElement.scrollTop;
        let scrollHeight = document.documentElement.scrollHeight;
        //内容距离可视区底部的距离
        let distance = scrollHeight - (clientHeight + scrollTop);

        if (distance < threshold) {
          if (flag) {
            //一旦进入 将开关关闭 防止多次触发
            flag = false;
            // console.log('快要到底部了');
            fn(); //回调传入的函数
          }
        } else {
          //滚动的距离已经大于了阈值 将开关打开 用户可能滚动条往上滚了
          flag = true;
        }
      };
    }

    lazyLoad(function () {
      pageid++; //每次被懒加载回调的时候 让id自加 请求不同的数据
      if (pageid > 14) {
        //当id大于14的时候 停止发送请求
        return;
      }
      $.ajax({
        url: "http://chst.vip:1234/api/getmoneyctrl",
        data: {
          pageid,
        },
      }).then((res) => {
        console.log(res);
        render(res.result);
        //循环数据 创建结构
      });
    }, 50);

    $.ajax({
      url: "http://chst.vip:1234/api/getmoneyctrl",
      data: {
        pageid: 1,
      },
    }).then((res) => {
      console.log(res);
      render(res.result);
      //循环数据 创建结构
    });
  })();
</script>
